<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="8">
                <el-card shadow="hover" class="mgb20" style="height:252px;">
                    <div class="user-info">
                        <img :src="imgUrl" class="user-avator" alt />
                        <div class="user-info-cont">
                            <div class="user-info-name">{{name}}</div>
                            <div>{{role}}</div>
                        </div>
                    </div>
                    <div class="user-info-list">
                        上次登录时间：
                        <span>{{loginData}}</span>
                    </div>
                    <div class="user-info-list">
                        上次登录IP：
                        <span>{{loginIp}}</span>
                    </div>
                </el-card>
                <el-card shadow="hover" style="height:252px;">
                    <div slot="header" class="clearfix">
                        <span>设备状况</span>
                    </div>
                    <el-progress :percentage="parseFloat((wait*100/all)).toFixed(1)" color="#42b983"></el-progress>待加工
                    <el-progress :percentage="parseFloat((bad*100/all)).toFixed(1)" color="#f1e05a"></el-progress>故障中
                    <el-progress :percentage="parseFloat((run*100/all)).toFixed(1)"></el-progress>运行中
                </el-card>
            </el-col>

            <el-col :span="16">
                <el-row :gutter="20" class="mgb20">
                    <el-col :span="8">
                        <el-card shadow="hover" :body-style="{padding: '0px'}">
                            <div class="grid-content grid-con-1">
                                <i class="el-icon-lx-people grid-con-icon"></i>
                                <div class="grid-cont-right">
                                    <div class="grid-num">{{num}}</div>
                                    <div>本季度订单</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card shadow="hover" :body-style="{padding: '0px'}">
                            <div class="grid-content grid-con-2">
                                <i class="el-icon-lx-notice grid-con-icon"></i>
                                <div class="grid-cont-right">
                                    <div class="grid-num">{{donenum}}</div>
                                    <div>交货订单</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="8">
                        <el-card shadow="hover" :body-style="{padding: '0px'}">
                            <div class="grid-content grid-con-3">
                                <i class="el-icon-lx-goods grid-con-icon"></i>
                                <div class="grid-cont-right">
                                    <div class="grid-num">{{excnums}}</div>
                                    <div>异常订单</div>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
                <el-card shadow="always" style="height:403px;">
                    <div slot="header" class="clearfix">
                        <span>通知</span>
                        <el-button style="float: right; padding: 3px 0;font-min-size: 20px" type="text" v-if="hasAuth('notice:add')" @click="addNotice">添加</el-button>
                    </div>
                    <div v-for="o in this.notice" :key="o" class="text item" @click="board(o)"  >
                      <div  class="demo"> {{ o.head }} </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12">
                <el-card shadow="hover">
                    <schart ref="bar" class="schart" canvasId="bar" :options="options"></schart>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card shadow="hover">
                    <schart ref="line" class="schart" canvasId="line" :options="options2"></schart>
                </el-card>
            </el-col>
        </el-row>



        <!-- 编辑弹出框 -->
        <el-dialog title="添加内容" :visible.sync="noticeVisible" width="30%" >
            <el-form ref="form" :model="form" :rules="rules" label-width="95px">

                <el-form-item label="标题" prop="head" >
                    <el-input v-model="form.head" class="handle-input mr10" ></el-input>
                </el-form-item>


                <el-form-item label="内容" prop="content"  >
                    <el-input type="textarea" v-model="form.content" class="handle-input mr10"></el-input>
                </el-form-item>


            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="noticeVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveNotice">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import Schart from 'vue-schart';
import bus from '../common/bus';
export default {
    name: 'dashboard',
    loginIp: '0.0.0.0',
    loginDate: '0-0-0-0',
    userType: '',
    photo: '../../assets/img/img2.jpg',
    data() {
        return {

            bad:0,
            run:0,
            wait:0,
            num:0,
            donenum:0,
            excnums:0,
            notice:[],
            todoList: [],
            form:{},
            data: [

            ],
            noticeVisible:false,
            options: {
                type: 'bar',
                title: {
                    text: '本周生产计划'
                },
                xRorate: 25,
                labels: [""],
                datasets: [
                    {
                        label: '',
                        data: []
                    }
                ]
            },
            options2: {
                type: 'line',
                title: {
                    text: '产品需求'
                },
                labels: [],
                datasets: []
            },

            rules:{
                head: [{ required: true, message: '请输入通知标题', trigger: 'blur' }],
            }
        };
    },
    components: {
        Schart
    },
    computed: {
        role() {
            let role;
            console.log(this.userType)
            if(this.userType === 1){
                role="超级管理员"
            }else if(this.userType === 2){
                role="计划管理员"
            }else if(this.userType === 3){
                role="工艺管理员"
            }else if(this.userType === 4){
                role="设备管理员"
            }

            return role;
        },
        imgUrl: function () {
            return this.photo;
        },
        // excnums: function () {
        //     return sessionStorage.getItem("excnums")
        // },
        // num: function () {
        //     return sessionStorage.getItem("num")
        // },
        // donenum: function () {
        //     return sessionStorage.getItem("donenum")
        // },

        all() {
            return this.wait+this.run+this.bad
        }
    },
    created() {
        this.$axios.get('/api/equip/selectCondition').then(res =>{
            if(res.data.code !=="200"){
                this.$message.error(res.data.message);
            }
            else {
                this.wait=res.data.data.wait;
                this.run=res.data.data.run;
                this.bad=res.data.data.bad;
            }

        });
        this.getordernums();
        this.frashdata();
        this.ChartData1();
        this.ChartData2();
        this.getNotice();
    },
    methods: {
        board(o) {
            console.log(o);
            this.$alert(o.content, '通知', {
                confirmButtonText: '确定',
                callback: action => {

                }
            });
        },
        getNotice(){
            this.$axios.get('/api/sysUser/selectNotice').then(res=>{
                if (res.data.code==="200"){
                    console.log(res.data.data);
                    this.notice=res.data.data;
                } else {
                    this.$message.error(res.data.message);
                }
            });
        },

        addNotice(){
            this.noticeVisible = true;
        },

        saveNotice(){
            this.$axios.post('/api/sysUser/addNotice',this.form).then(res=>{
                this.noticeVisible=false;
                if (res.data.code==="200"){
                    this.$message.success(res.data.message);
                    this.getNotice();
                } else {
                    this.$message.error(res.data.message);
                }
                this.form=[];
            });
        },

        hasAuth(perm) {
            var authority = this.$store.state.menus.permList;

            return authority.indexOf(perm) > -1
        },
        changeDate() {
            const now = new Date().getTime();
            this.data.forEach((item, index) => {
                const date = new Date(now - (6 - index) * 86400000);
                item.name = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
            });
        },
        frashdata(){
            var obj=JSON.parse(sessionStorage.getItem("userInfo"));
            this.loginIp = obj.loginIp;
            var logintime = new Date(obj.loginDate);
            var month= logintime.getMonth()+1;
            this.loginData = logintime.getFullYear()+"年"+month+"月"+logintime.getDate()+"日"+logintime.getHours()+"时"+logintime.getMinutes()+"分";
            this.name = obj.name;
            this.photo = require("../../assets/img/"+obj.photo);
            this.userType = obj.userType;
        },
        getordernums(){
            this.$axios.get('/api/orders/excNum').then(res=>{
                this.excnums=res.data.data;

            });
            this.$axios.get('/api/orders/num').then(res=>{
                this.num=res.data.data;
            });
            this.$axios.get('/api/orders/doneNum').then(res=>{
                this.donenum=res.data.data;
            });
        },
        ChartData1() {
            this.$axios.get('/api/plan/ChartData1').then(res=>{
                if(res.data.code !=="200"){
                    this.$message.error(res.data.message);
                }
                else {
                    this.options.labels=res.data.data.labels;
                    this.options.datasets=res.data.data.datasets;

                }
            })
        },
        ChartData2() {
            this.$axios.get('/api/orders/ChartData2').then(res=>{
                if(res.data.code !=="200"){
                    this.$message.error(res.data.message);
                }else {
                    this.options2.labels=res.data.data.labels;
                    this.options2.datasets=res.data.data.datasets;
                }

            })

        },

        handleBus(msg) {
            setTimeout(() => {
                this.renderChart();
            }, 200);
        },
        renderChart() {
            this.$refs.bar.renderChart();
            this.$refs.line.renderChart();
        }
    }
};
</script>


<style scoped>
.el-row {
    margin-bottom: 20px;
}

.grid-content {
    display: flex;
    align-items: center;
    height: 100px;
}

.grid-cont-right {
    flex: 1;
    text-align: center;
    font-size: 14px;
    color: #999;
}

.grid-num {
    font-size: 30px;
    font-weight: bold;
}

.grid-con-icon {
    font-size: 50px;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    color: #fff;
}

.grid-con-1 .grid-con-icon {
    background: rgb(45, 140, 240);
}

.grid-con-1 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-2 .grid-con-icon {
    background: rgb(100, 213, 114);
}

.grid-con-2 .grid-num {
    color: rgb(45, 140, 240);
}

.grid-con-3 .grid-con-icon {
    background: rgb(242, 94, 67);
}

.grid-con-3 .grid-num {
    color: rgb(242, 94, 67);
}

.user-info {
    display: flex;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 2px solid #ccc;
    margin-bottom: 20px;
}

.user-avator {
    width: 120px;
    height: 120px;
    border-radius: 50%;
}

.user-info-cont {
    padding-left: 50px;
    flex: 1;
    font-size: 14px;
    color: #999;
}

.user-info-cont div:first-child {
    font-size: 30px;
    color: #222;
}

.user-info-list {
    font-size: 14px;
    color: #999;
    line-height: 25px;
}

.user-info-list span {
    margin-left: 70px;
}

.mgb20 {
    margin-bottom: 20px;
}

.todo-item {
    font-size: 14px;
}

.todo-item-del {
    text-decoration: line-through;
    color: #999;
}

.schart {
    width: 100%;
    height: 300px;
}


.demo:hover{width:100%;background: #ffe4e8
}

</style>
